<template>
  <div class="main-app">
    <h1>主应用（Vue3）</h1>
    <div class="sub-apps">
      <div class="sub-app">
        <h2>Vue2 子应用</h2>
        <WujieVue
          width="100%"
          height="500px"
          name="vue2"
          url="http://localhost:8082"
          :sync="true"
        ></WujieVue>
      </div>
      <div class="sub-app">
        <h2>Vue3 子应用</h2>
        <WujieVue
          width="100%"
          height="500px"
          name="vue3"
          url="http://localhost:8083"
          :sync="true"
          :props="props"
          :beforeLoad="beforeLoad"
          :beforeMount="beforeMount"
          :afterMount="afterMount"
          :beforeUnmount="beforeUnmount"
          :afterUnmount="afterUnmount"
        ></WujieVue>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = ref({
  data: 'hello'
})

const beforeLoad = () => {
  console.log('vue3 beforeLoad')
}

const beforeMount = () => {
  console.log('vue3 beforeMount')
}

const afterMount = () => {
  console.log('vue3 afterMount')
}

const beforeUnmount = () => {
  console.log('vue3 beforeUnmount')
}

const afterUnmount = () => {
  console.log('vue3 afterUnmount')
}
</script>

<style scoped>
.main-app {
  padding: 20px;
}
.sub-apps {
  display: flex;
  gap: 20px;
}
.sub-app {
  flex: 1;
  border: 1px solid #ddd;
  padding: 10px;
}
</style> 